<template>
  <div>
		<!-- 图表 -->
    <div id="PieProfitChart" class="pie-profit-Chart" />
  </div>
</template>

<script>
import * as echarts5 from 'echarts5';
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
/* mixins */
import ChartsMixin from '@src/modules/report/managementReport/charts/components/mixins/charts.mixins';

export default {
  name: 'pie-profit-chart',
  mixins: [ChartsMixin],
  props: {
    chartType: {
      type: String,
			default: ''
    },
    chartData: {
      type: Object,
      default: () => {}
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const chartData = computed(() => {
			return props.chartData
		})
		watch(chartData, (n,o) => {
			drawChart()
		})
    const chart = ref(null)
    const initChart = () => {
      chart.value = echarts5.init(document.getElementById('PieProfitChart'), 'shb')
      drawChart()
    }
    const drawChart = () => {
      const { incomeCount, payCount, profitCount, payRingRate, profitRingRate } = chartData.value || {}
      const surplusPayRingRate = 100 - parseFloat(payRingRate)
      const surplusProfitRingRate = 100 - parseFloat(profitRingRate)
      const color = ['#5E85FFFF', '#5EB3FEFF','#FFB85EFF', '#FF801EFF','#FF795EFF','#FF695EFF']
      const dataStyle = {
        normal: {
          color: '#ffffff',
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          shadowBlur: 40,
          borderWidth: 10,
          shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
        }
      }
      const placeHolderStyle = {
        normal: {
          color: '#adadad',
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        },
        emphasis: {
          // color: '#adadad'
        }
      }
      const legendFormatter = (name) => {
        if (name === '总收入') return `${name ?? ''} ¥${incomeCount ?? ''}`
        if (name === '总支出') return `${name ?? ''} ¥${payCount ?? ''}`
        if (name === '总利润') return `${name ?? ''} ¥${profitCount ?? ''}`
      }
      const dataOption = {
        title: {
            // text: '匹配度',
            x: 'center',
            y: 'center',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 24,
                color: "#fff",
            }
        },
        tooltip: {
          trigger: 'item',
          show: true,
          formatter: "{b} : {d}%",
          // backgroundColor: 'rgba(0,0,0,0.7)', // 背景
          // padding: [8, 10], // 内边距
          // extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
        },
        legend: {
          icon: 'circle',
          bottom: 'bottom',
          bottom: '0',
          itemGap: 20,
          data: ['总收入', '总支出', '总利润'],
          trigger: 'axis',
          formatter: legendFormatter,
          textStyle: {
            color: '#fft'
          },
          selected: {
            '总利润': parseFloat(profitRingRate) > 0 ? true : false
          }
        },
        series: [
          {
            name: 'Line 1',
            type: 'pie',
            clockWise: false,
            radius: [90, 100],
            center:['50%','50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            label:{
              borderRadius:'10',
            },
            data: [
              {
                value: 0,
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle
              },
              {
                value: 100,
                name: '总收入',
                itemStyle: {
                  normal: {
                    color: new echarts5.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color:color[0]
                    }, {
                      offset: 1,
                      color: color[1]
                    }])
                  }
                }
              },
            ]
          },
          {
            name: 'Line 2',
            type: 'pie',
            clockWise: false,
            radius: [60, 70],
            center:['50%','50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [
              {
                value: surplusPayRingRate,
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle
              },
              {
                value: payRingRate,
                name: '总支出',
                itemStyle: {
                  normal: {
                    color: new echarts5.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: color[2]
                    }, {
                      offset: 1,
                      color: color[3]
                    }])
                  }
                }
              },
            ]
          },
          {
            name: 'Line 3',
            type: 'pie',
            clockWise: false,
            radius: [30, 40],
            center:['50%','50%'],
            itemStyle: dataStyle,
            hoverAnimation: false,
            startAngle: 90,
            data: [
              {
                value: surplusProfitRingRate,
                name: '',
                tooltip: {
                  show: false
                },
                itemStyle: placeHolderStyle
              },
              {
                value: profitRingRate,
                name: '总利润',
                itemStyle: {
                  normal: {
                    color: new echarts5.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: color[4]
                    }, {
                      offset: 1,
                      color: color[5]
                    }]),
                  }
                }
              },
            ]
          }
        ]
      }
      chart.value.clear()
      chart.value.setOption(dataOption)
      nextTick(() => {
        chart.value.resize()
      })
    }

    onMounted(() => {
      initChart()
    })
    onUnmounted(() => {
      if (!chart.value) return
      chart.value = null
    })
    return {
      chart,
      initChart
		}
  },
};
</script>
<style lang="scss" scoped>
.pie-profit-Chart {
	width: 100%;
  height: 260px;
}
</style>
